Custom Server and Static Optimization

[italoayres]

Hello Sirs,
Would you mind elaborating on this?

A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.

As I understand, is there no way to make static optimization work if I'm using next-translate with a custom server? How is using the custom server middleware different from using Next default server?

Would you please share any thoughts or updates on this matter?

Much obliged.

[aralroca]

As I understand, is there no way to make static optimization work if I'm using next-translate with a custom server?

First of all, a clarification: There is no static optimization using a custom server with Next.js. (with or without next-translate). Optimization means serverless functions, SSG and static pages. This is a Next.js requirement.

Nevertheless, if you are using a custom server and you want to use next-translate, you can use the i18nMiddleware instead of the "normal way". We recommend using the middleware in this case to avoid the "build step" of the "normal way", so you don't need static pages and you can manage the language redirects with the middleware.

How is using the custom server middleware different from using Next default server?

You can read the behavior of the middleware here:

• https://github.com/vinissimus/next-translate/blob/master/src/i18nMiddleware.js

Basically is doing two things:

• Adding the lang to the req. So you can access to the language using req.lang.
• Depending the config, can redirect to the default language when the language is not provided. Ex: /about -> 301 to -> /en/about.

---

Maybe we can clarify this in the docs. We have these docs only for the custom server case:

• https://github.com/vinissimus/next-translate/blob/master/docs/USING_CUSTOM_SERVER.md

Feel free to do a PR fixing the parts that for you are not clear.

[aralroca]

Note: Probably in the future, we are going to unify the way to use this lib in just one way.

[italoayres]

Thanks for taking the time to answer Mr.

Regarding the custom server issue, is indeed possible to keep Static Optimization (SO) enabled even if you're using a custom server.

I've created this repository to demonstrate: https://github.com/italoayres/nextjs-with-redux-ssr
It uses Nextjs and Redux with a custom Express server, and, after the build, it generates a static page.
(This is possible due to the use of next-redux-wrapper, which, as I understood, decides if it's going to inject the getInitialProps on the _app or not.)

BTW, I had already read the docs on using a custom server with next-translate, and I didn't quite understand the limitation that was mentioned. That's why I came here for some clarification.

I still don't fully understand the complexities of SSR with NextJs, so it is hard for me to evaluate if this is truly possible or no. But, as I can see, at least there's no inherited flaw on using a custom server that would completely prevent static optimization.

[aralroca]

Amazing @italoayres . I didn't know that with a Custom Server it can still maintain the Automatic Static Optimization.

In the Next.js docs is saying the opposite:

source: https://nextjs.org/docs/advanced-features/custom-server

Nevertheless, using the i18nMiddleware and the appWithI18n is adding the getInitialProps on _app.js... So, in that case, it's not doing the static optimization...

The i18nMiddleware is used to add the req.lang accessible on all pages. An alternative to this is the "build step", following the default way on the README.md. It can work with a custom server too, without adding a getInitialProps / getServerSideProps on the _app.js.

The i18nMiddlerare can still useful in some cases when using a custom server you need a getInitialProps on the_app.js. So in this case, you can skip the "build step" and delegate the responsibility to the middleware.

[aralroca]

I agree that the docs should be updated and clarify these things better.