Next.js Flashcards
What is server component?
Server component refers to a part of the framework that handles the server-side functionality.
What is SSR (Server-Side Rendering) ?
SHORT - “Server-side rendering (SSR) is an application’s ability to convert HTML files on the server into a fully rendered HTML page for the client. Best for pages that need to be up-to-date with every request, as the HTML is generated dynamically”. LONG - Server component of Next.js where HTML is generated on the server for each request. It allows dynamic rendering based on data fetched from a backend or API. IMPROVES SEO and load times since the page is pre-rendered. Generation happens at runtime. Useful for pages that require real-time data, such a user-specific information or rapidly changing data like stock prices, news updates.
What is SSG (Static Site Generation)
SHORT - “Best for pages that do not need to change every time they are accessed. The entire HTML is built at build time and served as static files.” LONG- SSG refers to a method of how web pages are rendered and served. Web pages are pre-rendered into HTML at build time. This means that the HTML, CSS, and JavaScript for every page that uses SSG are generated when you build your application, before it is deployed. These static files are then ready to be served directly to your users from a server or a Content Delivery Network (CDN), making the site very fast to load because the server does not need to generate page content on-the-fly for each request. ‘getStaticProps (and getStaticPaths for dynamic routes) are essential to define how the data for each page is fetched and how the pages are rendered at build time. These functions are what make it possible to serve pre-rendered HTML directly to users, ensuring fast load times and reducing server load since the HTML does not need to be generated for each user request.
What does ISR (Incremental Static Regeneration) mean?.
Combines SSG with on-demand revalidation. Pages are generated statically but can be updated “in the background” after deployment without rebuilding the entire site. How to use? - Use getStaticProps with the revalidate option to specify how often the data should be updated (in seconds).
What does CSR (Client-Side Rendering) mean?
JavaScript running in the browser handles all the rendering. The initial page is loaded as a skeleton, and content is fetched and rendered directly in the client using React. How to use? - Typically handled with React state management and data fetching methods like fetch in useEffect hooks.
What does “caching” mean?
Caching in Next.js, or in web development generally, is about storing parts of your website so that they can be quickly loaded without needing to be re-created or re-fetched from the server every time they are needed. This can greatly improve the performance of a website by reducing load times and server load. Usually static files are ofthen cached on a CDN or in the browser.
What does “progressive enhancement” mean?
It is a strategy in web development aimed at building web experiences that work for everyone by initially serving the simplest and most complete version of your content to users, and then progressively adding more complex layers of functionality or enhancements based on the user’s browser capabilities, network conditions, and preferences.
What is dynamic routing?
Dynamic Routing refers to the ability to create routes in your web application that can change based on certain parameters or conditions.
