Mar 10, 2020 • ☕️ 3 min read
What is web rendering? It is a process of generating HTML output which is ready to be rendered by web browser and viewable by user, this process can happen anywhere and anytime depending on your strategy.
There are couple strategies to pick where and when for rendering like server-side rendering (SSR), client-side rendering (CSR), static rendering, prerendering, and universal rendering.
Server-Side Rendering means generating the viewable HTML for a page on the server in response to navigation. This avoids additional round-trips for data fetching and templating on the client, since it’s handled before the browser gets a response.
Prerendering means you put a renderer between your server and user browser to pre-render a client-side application to capture its initial state as static HTML.
Static rendering means producing a separate HTML file for each URL ahead of time at build time, can be deployed to multiple CDNs to take advantage of edge-caching, are interactive without the need to execute much client-side JS.
Your chosen strategy can be pure or hybrid. This is a difficult decision to make and will put great impact on following dimensions:
Check out this post rendering on the web which has a handy infographic showing the server-client spectrum.
Above strategies are slightly different and has their pros and cons, before picking the one for your next project, answer following questions:
Is your site highly interactive, dynamic or static content, private or public? SSR requires full page reloads so not good for interactivity, static rendering needs to rebuild every time content changes. If you are building an internal dashboard where an extra few hundred milliseconds on initial load doesn’t matter that much.
Can you tolerate high server cost? server-side and universal rendering requires web server to run and will consume a lot resources, client-side and static rendering can be deployed anywhere.
Who are you? server-side and universal rendering require steep learning curve because you have to worry both server and client at the same time. Are you willing to switch solution stacks over time?
There is a longstanding debate over the correct applications of server rendering versus client-side rendering, but it’s important to remember that you can opt to use server rendering for some pages and not others. Some sites have adopted hybrid rendering techniques with success.
There is no silver bullet solution to web rendering, keep learning and don’t afraid to pivot some strategies to see what works for you and what doesn’t.
These days, front-end mastery involves not only knowing how to write good CSS, but also which of these technologies to use, and when
A low-level utility-first CSS framework to write inline styles for rapidly building custom user interfaces
JAMstack is an abstract solution stack which focuses more on categories of tools than specific ones
A small CSS file normalize.css that provides better cross-browser consistency in the default styling of HTML elements alternative to the traditional CSS reset