Here a web server will provide the html, css and js directly to the user and browser will render it.
This is the simplest, fastest and secure approach.
Frameworks like react provides this rendering pattern by default.
Here a empty sheel html file will be served from the server along with the javascript and css.
Once it will load on the load on the browser, browser will parse html and js, on the rendering phase javascript will generate html on the go and insert to html.
This is simplest and out of the box approach with react framework.
Pros => Easy to implement.
Cons => In case js bundle size is very big then initialy on page load the page will be empty as the browser is busy waiting for network requst to arrive the JS bundle. The SEO will also go for a toss as there is no html at the start of the page and web crawlers will not know what this page is going to serve.
Here the server will try to parse the javascript and generate the HTML on server and return the generated html to browser along with the JS.
Once browser will get HTML then it will immidiatly render it for the users, yet since JS is not parsed so the page will not be interactive. Once JS will arive and parsed then it will be hyderated and it will make the page interactive.
Frameworks like Next JS will help you achieve this out of the box.
Pros => Better SEO support, better initial page rendering to show something for the end users.
Cons => Time to first byte may be delayed as server it busy to generate the HTML on every request. Also if the JS bundle is still not arrived then time to interactivity will be higher.
Another better approach would be to segregate server and client bundles based on bellow conditions.
| What do you need to do? | Server Component | Client Component |
|---|---|---|
| Fetch data | ||
| Access backend resources (directly) | ||
| Keep sensitive information on the server (access tokens, API keys, etc) | ||
| Keep large dependencies on the server / Reduce client-side JavaScript | ||
Add interactivity and event listeners (onClick(), onChange(), etc) | ||
Use State and Lifecycle Effects (useState(), useReducer(), useEffect(), etc) | ||
| Use browser-only APIs | ||
| Use custom hooks that depend on state, effects, or browser-only APIs | ||
| Use React Class components |