Build Dynamic Web Pages with Astro Server-Side Rendering

How to Build Dynamic Web Pages with Astro Server-Side Rendering

When building websites with Astro, you often pre-render all your pages at build time. This means your site is a collection of static files. The server just needs to send these files to the browser. This works great for content that doesn’t change often. However, some websites need to show content that changes frequently. Think about product listings that update all day. Or user dashboards that show personal, changing information. Building these pages ahead of time just won’t work. These pages need to be built on the server when someone asks for them. This is called Server-Side Rendering (SSR). Astro lets you do this. You can tell Astro to build certain pages on demand instead of at build time.

What You’ll Learn

In this guide, you’ll learn how to set up Astro to use Server-Side Rendering. You’ll discover how to add a server adapter to your project. You’ll also learn how to mark specific pages for on-demand rendering. Finally, you’ll see how to fetch and display dynamic data on these server-rendered pages.

Prerequisites

• Basic understanding of web development concepts.
• Node.js and npm (or yarn/pnpm) installed on your machine.
• An existing Astro project (or you can create a new one).

Steps to Enable Server-Side Rendering

1. Create a Page for Dynamic Content

   First, create a new page that you want to render on the server. For this example, let’s create a page for products. Make a new folder named products in your src/pages/ directory. Inside this folder, create an index.astro file. This page will eventually live at the URL /products.

   Inside src/pages/products/index.astro, set up a basic Astro component. Include front matter for layout imports and define an interface for your product data. For instance, you might have a simple interface that just includes a title property of type string. Then, add a basic template using your layout to display content.

2. Add a Server Adapter to Your Project

   By default, Astro builds everything at build time. To enable server-side rendering, you need to add a server adapter. Adapters connect Astro to specific deployment platforms or server environments. Astro provides adapters for popular services like Cloudflare, Netlify, Vercel, and Node.js.

   Choose an adapter based on where you plan to deploy your site. For example, if you’re deploying to Netlify, you’ll use the Netlify adapter. Open your terminal and run the command npx astro add netlify. This command installs the necessary package and asks for your confirmation.

   You’ll be asked to confirm the installation and allow changes to your astro.config.mjs file. Type ‘y’ and press Enter for both prompts. This registers the server adapter with your Astro project.

3. Mark the Page for On-Demand Rendering

   Now, tell Astro that this specific page should be server-rendered. Go back to your src/pages/products/index.astro file. In the front matter section, at the very top, add an export statement. This export must be named prerender and set to false.

   export const prerender = false;

   This setting tells Astro not to build this page during the build process. Instead, it will be rendered on the server each time a user requests it. This ensures the content is always up-to-date.

4. Fetch and Display Dynamic Data

   With the page set up for server rendering, you can now fetch dynamic data. You can use the built-in Fetch API directly within the Astro component’s script section (which is typically in the front matter).

   For this example, we’ll use a dummy JSON API to get product data. In a real application, you would fetch data from your own API or database. Paste the fetch code into your component’s front matter. This code makes a request to the API, then parses the JSON response. It specifically accesses the products array from the response.

   Now, update the template section of your component to display this fetched data. Use curly braces to embed JavaScript expressions. You can map over the products array and return a simple HTML element for each product. For instance, display each product’s title within a div tag.

   Here’s how the template part might look:

   {products.map(product => (
     <div>{product.title}</div>
   ))}
   

5. Test Your Server-Rendered Page

   Save your src/pages/products/index.astro file. Now, run your Astro development server using npm run dev. Navigate to the /products URL in your browser.

   You should see the product titles fetched from the dummy API. If you refresh the page, the data will be fetched again from the server, ensuring you have the latest information. This confirms that your page is indeed being server-rendered on demand.

When to Use Server-Side Rendering

Server-Side Rendering is essential for pages where content changes frequently. This includes things like e-commerce product lists, stock market updates, or real-time news feeds. It’s also crucial for personalized user content, such as dashboards or account information. Using SSR with Astro means you avoid rebuilding your entire site just to update a few pieces of dynamic content. It ensures your users always see the most current information without you having to manually rebuild and redeploy your site multiple times a day.

Source: Astro Crash Course #11 – Server Side Rendering (YouTube)