QuiiBz / next-international

Type-safe internationalization (i18n) for Next.js
https://next-international.vercel.app
MIT License
1.19k stars 52 forks source link

Bailout to client side rendering #410

Closed TimurKr closed 1 month ago

TimurKr commented 1 month ago

Describe the bug I just converted my repo to use your library for its type-safety and it is awesome. Unfortunately, I am not able to get the SSR working as I expected.

<body class="__variable_e52a9e layout_bluewhiteBackground__4Y9gL">
  <!--$!-->
  <template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template>
  <!--/$-->
  <!--$!-->
  <template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template>
  <!--/$-->
  ...
</body>

and if you provide the fallback property, like this:

<I18nProviderClient locale={locale} fallback={<p>Loading...</p>}>
  {children}
</I18nProviderClient>

you get

<body class="__variable_e52a9e layout_bluewhiteBackground__4Y9gL">
  <!--$!-->
  <template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template>
  <p>Loading...</p>
  <!--/$-->
  <!--$!-->
  <template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template>
  <!--/$-->
  ...
</body>

To Reproduce Create a minimal example and inspect the network when you go to the page. You will see that the first response includes the contents mentioned above and only after the js files are downloaded and parsed, the rest gets rendered on the client.

Expected behavior Prerender everything nicely on the server, so the fallback is used only when rendering on the client for some other reason.

About (please complete the following information):

TimurKr commented 1 month ago

This may very well be an issue in my repo, as I made a minimal example and it works as expected... I will investigate this more, but closing this issue for now.