Support for client side rendering (v8)

[valstu]

Is your feature request related to a problem? Please describe.

At the moment (on v.8.0.1) it seems like you're forced to use either getServerSideProps or getStaticProps functions on the page level. However there might be cases where you don't want to use either. One example would be some sort of dashboard where data is changing frequently and it makes no sense to pre-render the page.

Describe the solution you'd like

It would be nice if you could just use the useTranslation hook without exporting getServerSideProps or getStaticProps and using serverSideTranslations inside them.

Describe alternatives you've considered

Haven't figured out any other methods to get this working than to use either getServerSideProps or getStaticProps.

Additional context

When I'm talking about client side rendering in this feature request I'm referring this:
https://nextjs.org/docs/basic-features/data-fetching#fetching-data-on-the-client-side

[hgbao]

+1 on this

[isaachinman]

Not sure I follow – even if you want to do client side rendering, why not send down the translations hypothetically necessary with the HTML document, as opposed to a separate network request?

[hgbao]

@isaachinman the point is, we totally did not use getServerSideProps or getStaticProps in most of our pages. Because the data is fetched using swr as https://nextjs.org/docs/basic-features/data-fetching#fetching-data-on-the-client-side

But now in the 8.0.1 version, we have to manually add getStaticProps for all the pages we have been done (to use serverSideTranslations)

[isaachinman]

@hgbao Then, I think a solution would be dependent on the global singleton that we want to release for #983.

Flow would go like such:

First, add i18next-http-backend via config.use.

Then, in your code, you can do:

import { i18n } from 'next-i18next'

i18n.reloadResources(locale, namespace)

Let me know if that makes sense. As I say, this depends upon the global i18n client being exposed, which is still a work in progress.

[nicolasconnault]

i18next-http-backend

Hi Isaac, thanks for your work on this, it's coming just in time for us :)

Can you please add an example to the readme/doc on how to implement the global singleton solution? I don't really understand how i18next-http-backend comes into it, or how to configure it for this purpose.

[isaachinman]

@nicolasconnault The global singleton is now merged, and you can do:

import { i18n } from 'next-i18next'

i18n.reloadResources(locale, namespace)

To make this work over http (client side), you'll need to add something like this to your next-i18next.config.js:

const i18nextHttpBackend = require("i18next-http-backend").default;

module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "de"],
  },
  use: process.browser ? [i18nextHttpBackend] : [],
};

[nicolasconnault]

@isaachinman thanks for your help Isaac, much appreciated!

[nicolasconnault]

import { i18n } from 'next-i18next'

i18n.reloadResources(locale, namespace)

Hi again @isaachinman , we're having some difficulty with this code, as the i18n export from next-i18next is a type, and has no reloadResources function. We can only get reloadResources from

import { i18n } from "next-i18next/src/index";

But when we call i18n.reloadResources we get
TypeError: Cannot read property 'reload' of undefined

Do we need to configure i18next-http-backend as described here? https://github.com/i18next/i18next-http-backend

[isaachinman]

@nicolasconnault The type is defined here.

It sounds like the actual i18n import is undefined? That is unexpected, as it should be null until it is assigned.

[waqas-nr]

Hi,

Is this feature implemented?
I have a user dashboard where I don't want to use both getServerSideProps and getStaticProps. In that case how I can use the translation?

I will be very thankful for your reply.

[adrai]

https://github.com/i18next/next-i18next#client-side-loading-of-translations-via-http

[waqas-nr]

@adrai thanks for your reply.

Can you share an example? I couldn't manage to solve my problem.

https://github.com/i18next/next-i18next#client-side-loading-of-translations-via-http

[adrai]

just follow the link there:

https://github.com/i18next/i18next-http-backend/tree/master/example/next
https://github.com/i18next/i18next-http-backend/blob/master/example/next/pages/client-page.js

[waqas-nr]

Thanks, I will check it