In addition to simple Client Side Rendering (which than used in Static Website Hosting), Application also supports ability to run it's own Server and handle rendering on it (Server Side Rendering).
💡 Note: All Server related logic is located in /src/server
As a part of Server request handling all unspecified directly GET requests are handled by Application Render Middleware. To support React Suspense and as result Lazy Loading React's renderToPipeableStream method used to handle SSR.
💡 Note: Using renderToPipeableStream enables Streaming HTML and Selective Hydration. Streaming HTML - React now doesn’t need to wait for Suspense-wrapped block to start streaming the HTML for the rest of the page. When Suspense-wrapped block is ready - React will stream it additionally. Selective Hydration - React hydrate the app before the Suspense-wrapped block has loaded. Suspence-blocks which are loaded and take USER action will be prioritized up to be hydrated.
Before sending to Browser, HTML template is processed in scope of Application Render Middleware to manage specific parts be populated. Those parts are:
- Rendered Application (pattern: <!--SSR_TEMPLATE_APP-->)
- Application initial Redux State (pattern: <!--SSR_TEMPLATE_APP_STATE-->)
- CSP Scripts nonce (pattern: SSR_TEMPLATE_SCRIPT_NONCE) - used to validate injected stringified Application Redux State script
💡 Note: CSP nonce used to validate injected content (scripts, styles, etc.). More details: https://content-security-policy.com/nonce/