HackMD
-
tags:
ReactSSRLearning
What is SSR?
Server-side rendering is when content on your webpage is rendered on the server and not on your browser using JavaScript.
Why SSR?
Traditional React apps make multiple requests before presenting content to the user. SSR builds the content on the server and presents it immediately, then does the React stuff like getting data.
Benefits
Performance
SSR apps break JavaScript and CSS into chunks, optimize assets, and render pages on the server before serving to the client browser, resulting in a faster initial load time.
SEO
With SSR search engine crawlers can explore the page to improve your app’s SEO performance. This is because all pages are rendered on the server with the relevant metadata, paragraphs, and headings before being served to the client, enabling you to get the benefits of a traditional website’s SEO.
User Experience
After the initial load, Universal SSR apps behave like typical SPAs in that the transition between pages and routes is seamless. Only data is sent back and forth, with the HTML content holders not being re-rendered.
Architecture
Render App
The purpose of this application is to render the react application as HTML and return it to the client. That way when the page is loaded it will have a static version of the React app immediately, without making additional requests.
Client App
The content returned to the client via SSR is a pre-built/static version of the React app. That said, event handlers and other interactive functionality (the purpose of React) are not included in that static rendering.
App Setup
The way to fix this is to setup a client-only application.
- Setup client application that contains your entire React app
- Modify Webpack config to output that client app into a public directory
- Modify the render output string on the server to output a small HTML file that links to/pulls in the output (build.js for example) of the client app
