How to refresh next-i18next content update automatically?
source link: https://dev.to/riywo/how-to-refresh-next-i18next-content-update-automatically-1e83
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to refresh next-i18next content update automatically?
Jun 13
・3 min read
tl;dr
If you want to refresh your Next.js app using next-i18next
automatically, you can do it like below:
import { GetStaticProps } from "next";
import { i18n } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useRouter } from "next/router";
import { useEffect } from "react";
import Home from "../components/home";
export const getStaticProps: GetStaticProps = async ({ locale }) => {
if (process.env.NODE_ENV === "development") {
await i18n?.reloadResources();
}
return {
props: {
...(await serverSideTranslations(locale!, ["common"])),
},
};
};
const Index = () => {
if (process.env.NODE_ENV === "development") {
const router = useRouter();
useEffect(() => {
const timer = setInterval(() => {
router.replace(router.asPath, undefined, {
scroll: false,
});
}, 5000);
return () => clearTimeout(timer);
});
}
return <Home />;
};
export default Index;
What was the issue?
When I started using next-i18next
, I realized next dev
server only loaded the translation files once when initialized and never updated even if I reloaded the page on my browser since server side doesn't change. Whenever I updated the translation, I needed to restart next dev
server, which was bad developer experience.
Alternative solutions
That is a known limitation and there are multiple GitHub issues like this. I was able to find two approaches:
- Restart
next dev
automatically whenever the content is updated. - Poll API endpoint to monitor the content update and refresh the content.
The option 1 is simple and nodemon
can easily achieve the goal. However, this is not "Fast Refresh" and takes a while.
The option 2 seems better because next dev
server keeps running, but too complicated to implement internal API. It can be done without API like next-remote-watch
which monitors files and calls Next.js's internal method to reload the page. I tried it but it still requires implementation of content refresh by calling i18n.reloadResources()
anyway. Also, page refresh is not "Fast Refresh" neither.
Solution
Then, I realized this can be done much simpler. First of all, it anyway requires polling from client side because there is no public method to execute "Fast Refresh" from Next.js server side. Using internal method like next-remote-watch
does is not sustainable. Therefore, client side polling is the best way.
However, setting up an API (i.e. /api/something
) for such a simple polling seems overkill. I thought it's probably enough by just re-rendering the page. With this approach, unless the virtual DOM of React has been updated, nothing happens on client side (I think).
Now, how I can tell the translation files' change to the client? Next.js has a good mechanism to provide props to page i.e. GetStaticProps
which is already used by next-i18next
installation. I found a great solution to trigger this from client side.
In addition, I found that it can call i18n.reloadResources()
there because i18n
instance is stored in a global value. I lazily implemented it with reloading i18n
at every request because my project doesn't have large translation files. This can eliminate file watcher logic at all.
Conclustion
Now, by adding a simple SetInterval()
to refresh the page every 5 seconds on client side and reloading i18n
on every GetStaticProps
call, my Next.js pages are always in sync within 5 seconds. This is Next.js/React refresh, not browser refresh nor server restart, thus it's fast enough.
Let me know if you have a better solution or if you find a drawback of this solution :)
Discussion (0)
Unable to load Comment Subscription component.
Try refreshing the page.
Recommend
-
41
README.md react-i18next
-
4
-
11
Fable.I18Next Fable bindings and helpers for i18next. The bindings work with Fable and on .NET Core for ServerSide-Rendering. Created by @atheck.
-
2
I18next is an internationalization-framework written in and for JavaScript. But it's much more than that.i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format)....
-
6
如何理解多语言国际化?图片中下拉部分已经清楚的说明了多语言国际化是什么了。个人理解:它就是我们在网站上可以通过切换语言类型来实现同...
-
0
The case for dynamic localization Ever built an application with a User Interface in multiple languages? Then you’ve probably experienced the situation where you, as developer, instantly had to fix some translations or add a new lang...
-
2
Site ColorhexText ColorAd ColorhexText Color
-
6
Taking localization to i18next levelJanuary 15, 2022 · 3 min readŠtěpán GranátFrontend Architect
-
3
-
2
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK