Static vs. Dynamic Rendering

1. Introduction

Rendering is a critical aspect of front-end architecture that determines how web pages are generated and delivered to users. This lesson explores two primary rendering techniques: static rendering and dynamic rendering, discussing their unique characteristics, advantages, and use cases.

2. Static Rendering

Static rendering generates HTML files at build time. These files are pre-rendered and served directly to the client, resulting in faster load times.

2.1 How It Works

1. Build Process: During the build process, the application generates static HTML files.
2. File Serving: The static files are served over a CDN or web server.
3. Client Request: The client requests a page, and the server responds with the pre-generated HTML.

2.2 Example

                // Next.js static generation example
                export async function getStaticProps() {
                    const data = await fetchData();
                    return { props: { data } };
                }
                
                const MyPage = ({ data }) => {
                    return 
{data.title}
;
                };
                export default MyPage;
                

3. Dynamic Rendering

Dynamic rendering generates HTML on the fly, usually based on user requests or interactions. This approach allows content to change according to user data or other variables.

3.1 How It Works

1. Request Handling: The server receives a request for a page.
2. Data Fetching: The server fetches data from APIs or databases.
3. HTML Generation: The server generates HTML dynamically based on the fetched data.

3.2 Example

                // Express.js dynamic rendering example
                app.get('/user/:id', async (req, res) => {
                    const user = await getUser(req.params.id);
                    res.render('user', { user });
                });
                

4. Comparison

5. Best Practices

• Use static rendering for blogs, documentation, and marketing pages.
• Opt for dynamic rendering for user dashboards and real-time applications.
• Combine both techniques in a hybrid approach for optimal performance.