rendering
2 min read
Terms
Loadingtime it takes to fetch data from the server.
Execution timetime it takes to execute the previously fetched, parsed and compiled data.
FCP First Contentful Painttime it takes before the requested page becomes largely visible on a user's device.
LCP Largest Contentful Painttime it takes before the requested page's main content is visible.
TTI Time To Interactivetime it takes before the requested page has become interactive.
FID First Input Delayan important, user-centric metric for measuring [load responsiveness](https://web.dev/user-centric-performance-metrics/#types-of-metrics) because it quantifies the experience users feel when trying to interact with unresponsive pages—a low FID helps ensure that the page is [usable](https://web.dev/user-centric-performance-metrics/#questions). Score < 100 is to aim for.
Types of rendering
Client Side Rendering CSRonly the HTML container for a page is rendered by the server, data fetching, templating and routing required to display content on the page is handled by JavaScript code that executes on the client side. Useful for pages that need fresh data, where strong SEO is not a concern.
Server Side Rendering SSRthe oldest methods of rendering web content. It generates the full HTML for the page content to be rendered in response to a user request. The content may include data from a datastore or external API. SSR is great for pages that consume dynamic data, but it's more SEO-friendly, unlike CSR.
Static Site Generation SSGHTML is generated on the server. There is no server at runtime and content is generated once, at build time, when the application is deployed, and the HTML is stored in a CDN and re-used for each request. Pages can be statically generated by using getStaticProps. SSG is suitable for pages whose data is mostly static
Incremental Static Regeneration ISRallows for creation or update of static pages after the site was built. No need to rebuild the entire site if data changes. ISG is best for pages containing data you want to update in intervals.