Scaling Up: Server-Side Rendering in Vue

[tammytee]

Summary

Server-side rendering (SSR) is a rendering method used in web development where web pages are rendered on the server and served to the browser. When compared to web applications that utilize client-side-rendering, SSR applications tend to have the following advantages:

• fast initial page load
• better for SEO purposes since the content is readily available for indexing
• better accessibility for users that utilize screen readers or use older devices, have less powerful CPUs, and slower internet connections

When deciding if SSR is necessary for your application there are a few things to consider, time-to-content being the most critical.

Issues with SSR in Vue

Problem	Explanation	Solution
Side effects inside Component Lifecycle Hooks	The beforeCreate and created hooks are the only lifecycle hooks called during SSR. You should avoid adding any code that produces side effects to these hooks since there is no way to tear it down after creation (e.g. a timer)	Move any code that produces side effects to the mounted lifecycle hook
Platform-Specific APIs	It's common for the server and client to share tasks, though it is unlikely the task will be executed on both when platform-specific APIs are in use. For example, browser-only globals like window or document will not work when executed in Node.js	Use a library to implement a universal API. An example of one of these libraries is node-fetch
Reactivity API for State Management	Vue's reactivity API uses a reactive object (declared as a singleton) to provide simple state management. This shared state stored in a JacaScripts module root scope is initialized only once on the server meaning the same instance is used across multiple requests. This makes the application susceptible to cross-request state pollution.	Create a new instance of the entire application - including the router and global stores - on each request and use as needed in your components using app-level provide. Piñia is a state management library, maintained by the Vue core team, that takes this into consideration out of the box.
Hydration Mismatch	Hydration mismatch occurs when the HTML shells for the client and server applications don't match.	Ensure the following is true to prevent hydration mismatch: randomly generated values are the same in both templates (use a random number generator library that supports generating with seeds), and local time conversions happen only on the client side since the timezone on the server and client may differ.
Teleports	Teleports are not returned in the rendered string during SSR.	Avoid targeting body when using SSR and Teleports together. Use a dedicated container instead. You should also render teleports on mount.