Nuxt•6d ago

How to do SSG and still build an API server?

I would like to serve the view of my nuxt app on a static CDN with pre-rendered HTML, while having the API server available on serverless functions.

3 Replies

kapa.ai•6d ago

Hi @valerio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve a setup where your Nuxt app serves pre-rendered HTML on a static CDN while having an API server available on serverless functions, you can configure your Nuxt application using Nitro. Here's how you can do it: 1. Pre-render your pages: Use the nuxi generate command to pre-render your pages. This command will generate static HTML files for your routes, which can be deployed to any static hosting service.

   npx nuxi generate

   npx nuxi generate

This command pre-renders every route of your application and stores the result in plain HTML files. Learn more about nuxi generate. 2. Configure API routes: To ensure that your API routes are handled by a runtime server, you can configure the Nitro build in your nuxt.config.ts file. This setup allows you to pre-render your pages while still outputting a server for the API routes.

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         crawlLinks: true,
         routes: ['/'], // Specify routes to prerender
         ignore: ['/api'] // Ignore API routes from prerendering
       }
     }
   })

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         crawlLinks: true,
         routes: ['/'], // Specify routes to prerender
         ignore: ['/api'] // Ignore API routes from prerendering
       }
     }
   })

This configuration will cause nuxt build to crawl all links from the front page and prerender them, while still correctly outputting a server (e.g., worker.js) to handle the /api routes at runtime. See more details on this setup. 3. Deploy to serverless functions: Use a serverless platform like Cloudflare Workers, Netlify Functions, or Vercel Edge Network to deploy your API server. Nitro supports universal deployment, allowing you to deploy your Nuxt app anywhere, including serverless environments. Learn more about universal deployment with Nitro. By following these steps, you can serve your Nuxt app's views as static files on a CDN while keeping your API server dynamic and available through serverless functions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@612831566565212160> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

valerioOP•6d ago

Is it possible to automatically insert all available routes in /pages?

Gaming

Programming

How to do SSG and still build an API server?

Did you find this page helpful?