# When I first deployed it, I was confused by the cache, so I looked into Nuxt's universal rendering.

I mistakenly thought it was deployed with SSG.

https://contributions.nove-b.dev/ is deployed to Netlify.

CloneOriginally was https://github.com/atinux/my-pull-requests, and just by changing env it would be my own, so I deployed it with nuxi build without reading the source code.

Lately, perhaps because I’ve been mainly using static generators, I thought it would be deployed with SSG, so I had to deploy it every time I submitted a pull request, and I was worried about how to do the regular deployment.

When I went to look at it after submitting a pull request the other day, I saw that the latest pull request had been reflected, and I was confused as to whether the deployment had been run without permission.

When I go to look at the deployment history, the deployment history has not been updated.

Thinking back that it might not be SSG, I submitted a pull request to try it out, and when I went to check it out, the pull request had not been updated and I was even more confused.

When I revisited it after a while, it had been updated and I was confused, so I decided to take a closer look at the code.

Do code reading

CSR or SSR api fetch

When I go to see the part that is fetch,

const { data: contributions } =
  (await useFetch) < Contributions > "/api/contributions";

I’m not doing anything particularly special.

By the way, useFetch is

This composable provides a convenient wrapper for . Automatically generate keys based on URL and fetch options, provide type hints for request URLs based on server routes, and infer API response types.

That’s what he said.

When I looked into it, I found that there is a function called pick that allows you to get only the key for a specific response, and server that allows you to switch between ssr and csr, which seems to be useful.

Parameter list

By the way, the way to switch between ssr and csr is to use nuxt.config.ts.

export default defineNuxtConfig({
  ssr: false,
  ...

It seemed possible to do this by setting it like this.

In other words, since nothing special is done, it seems that the default rendering of Nuxt is being performed.

Nuxt rendering modes

If you look at the document of Nuxt, it seems that the default rendering method is universal rendering.

If you look into universal rendering,

It may also return a fully rendered HTML page from cache if the page was pre-generated. Unlike client-side rendering, users get the entire initial content of your application instantly.

That’s what he said.

Then,

Thinking back that it might not be SSG, I submitted a pull request to try it out, and when I went to check it out, the pull request had not been updated and I was even more confused. When I revisited it after a while, I found it had been updated and was confused, so I decided to take a closer look at the code.

I was disappointed that it wasn’t reflected immediately.

So it seems like he’s talking about isr regarding this cache.

When I looked it up, it was nuxt.config.ts

  $production: {
    routeRules: {
      '/': { isr: 60 * 5 },
      '/api/contributions': { isr: 60 * 5 },
      '/feed.xml': { isr: 60 * 5 },
    },
  },

There was a description.

Once generated, it will be cached for 5 minutes (60 seconds * 5) and the static page generated with ssr will be displayed.

That’s how it worked.

It was around this time that I wanted to make use of a convenient repository and also use it to help with my studies.