How to prerender pages?

[ShlokDesai33]

My application contains many static products/$id pages that can be rendered on build time and cached. I was finding a solution for this and stumbled upon this discussion. The client data stuff is in progress but I don't see pre-rendering on the roadmap. Did the maintainers decide against implementing pre-rendering or is there another way to do it?

[akoenig]

@ShlokDesai33 Remix is generally a SSR framework. I would suggest to render your product pages via your Remix app at run time and then put a CDN in front of it.

That would be technically the same like having your pages rendered at build time.

[ShlokDesai33]

@akoenig I'm a little new to this so apologies if the question might be a little stupid. Could you please elaborate on "render your product pages via your Remix app at run time and then put a CDN in front of it"?

[akoenig]

@ShlokDesai33 No worries at all 😊

Let me walk you through this: A CDN is essentially a cache located in front of your application, which is often distributed worldwide. When a user requests a route, the request will be send to the CDN first. If the CDN can handle the request, it immediately sends back the response, ensuring that the request does not reach your application. In cases where the CDN does not have a copy of the response data, it reaches out to your application. The CDN then caches the response and sends it back to the user.

Ryan Florence has an excellent talk on this topic CDN Caching, Static Site Generation, and Server Side Rendering
and another one on HTTP Caching in general Remix Run - Introduction to HTTP Caching.

In Remix this would look like this:

// ~/routes/articles.$id.tsx


export async function loader({ params }: LoaderFunctionArgs) {
  const id = params.id;

  const article = await getArticleFromYourCmsById(id);

  return json({ article }, {
    headers: {
      "Cache-Control": "..." // Tell the CDN how long this route should be cached
    }
  });
}

export default function ArticlePage() {
  const { article } = useLoaderData<typeof loader>();

  return (
    // Render your article
  );
}

[ShlokDesai33]

@akoenig Thank you so much!!

[ShlokDesai33]

@akoenig Being a complete newbie to the web dev scene, the two videos by @ryanflorence you directed me to were extremely helpful. Are there more videos/articles/concepts you may know of that might expand my horizons further? It doesn't need to specifically be about CDNs and caching, just anything you think is super important / useful to know!