
Next.js 8 released - keybits
https://nextjs.org/blog/next-8
======
martpie
Next.js is an awesome framework, but dynamic routing is still a mess, and
clean URL masking [0] is unnecessary complicated: you have to add a route
handler to Express.js, and you have to use 2 different props to your <Link>
components to make it work.

The Next team explains it because they don't want to solve this problem by
shipping a definition of all the route of the app [1] because it does not
scale. But while it is true, it makes dynamic routes extremely painful to use.
Hopefully it will be fixed soon.

Another thing not mentioned in the blog post is they started to rewrite the
core of Next.js in TypeScript too, which is a big move!

    
    
      [0] https://nextjs.org/learn/basics/clean-urls-with-route-masking
      [1] https://github.com/zeit/next.js/issues/4989#issuecomment-442024894

~~~
ex3ndr
We are using `next-routes` and they are working really well for us.

~~~
atombender
next-routes is good, but it was unmaintained for a long time, with issues and
PRs (27 at the time of writing!) piling up. A new maintainer was just added
[1] who seems more active, so hopefully things will improve.

[1] [https://github.com/fridays/next-
routes/issues/244#issuecomme...](https://github.com/fridays/next-
routes/issues/244#issuecomment-461482668)

~~~
ex3ndr
Almost all of them are just version bumps. We wasn't needed anything for a
year of usage.

------
midway
What I don't get: Either you go full SPA _or_ SSR. And If you go for latter
then you can choose any stack, e.g. Rails, express with pug, Django, PHP, etc.
Why do people take React's constraints to the backend? No bashing, really
wondering what's so much better then. I know why a React SPA can be better
than a SSR. But what is better about a React SSR vs the typical SSR?

~~~
sshine
SPA? SSR?

~~~
nfriedly
SPA = Single Page App SSR = Server Side Rendered

SPAs run in the browser, therefore they must be written in JavaScript (or
something that compiles to it.)

SPAs have the drawback of having to load a bunch of JavaScript before
rendering anything, so the initial page load tends to be slow. Next.js gets
around this by performing SSR for the initial page view, and then you're
already looking at that page while all of the JS loads to render subsequent
pages.

~~~
nailer
The term 'SPA' is a little outdated - since HTML5 history (which is nearly a
decade old now) most 'SPAs' are actually multiple pages.

'web apps' is better.

------
jypepin
I've been using Next.js for a fairly big e-commerce project for a client, and
I have to say it's great.

The framework itself makes working with a React, universal rendering app much
easier than other solutions I've worked with. It's doing a great job at
starting very small while at the same time extending for your needs is pretty
easy for most things (such as build configs, custom server, etc).

The community is growing and very helpful too.

I'm very glad to see it continue to move so fast and definitely already see it
as a very strong option and probably becoming the de-facto solution for JS
apps, just how Rails or Django are to Ruby and Python.

Thanks to the team for the great work :)

edit: typos

~~~
chimen
It's great but not becoming the de-facto. I believe Gatsby is on that path, in
terms of popularity they seem to be ahead.

~~~
skrebbel
I thought Gatsby is a static site generator?

~~~
toper-centage
Yes and in that sense it overlaps next a bit... But next is much more.

~~~
skrebbel
In the way that Jekyll and Rails overlap?

------
fredley
Holy crap, these pages load fast. Honestly the best possible advertisement for
a javascript framework at the moment is how quickly the page paints. For me it
was virtually instantaneous. Bravo.

~~~
Ndymium
I'm behind a mobile connection which has been acting up today. For me the
experience on the website was pretty bad, as there were no loading indicators.
I clicked on a link and it did nothing for several seconds. Since it's not a
real page load, my browser did not show any indication of loading either.

I'm not entirely sure what next.js does, but I would be wary of using this
library due to the bad website experience on a non-optimal connection.

~~~
mAritz
Loading indicators are left up for developers to add in next.js, but aren't
very difficult to do.

I've used react-redux-loading-bar[1] in a recent small project of mine and it
worked quite well so far.

I'm not sure about working with the native loading indicators though.

In general I quite like the way next.js is handling these things: It's pretty
bare-bone but provides _a lot_ of examples of how to do more advanced
things.[2]

There's even an example for loading indicators:
[https://github.com/zeit/next.js/tree/canary/examples/with-
lo...](https://github.com/zeit/next.js/tree/canary/examples/with-loading)

[1] [https://github.com/mironov/react-redux-loading-
bar](https://github.com/mironov/react-redux-loading-bar) [2]
[https://github.com/zeit/next.js/tree/canary/examples](https://github.com/zeit/next.js/tree/canary/examples)

~~~
timneutkens
Great explanation @mAritz!

Thank you for your feedback @Ndymium, we've shipped a new version of the
website that has a loading indication (based on the with-loading example
posted above)

------
midway
Interesting read from Dec 2018 [1] about Next.js:

 _SSR throughput of your server is significantly less than CSR throughput. For
react in particular, the throughput impact is extremely large.
ReactDOMServer.renderToString is a synchronous CPU bound call, which holds the
event loop, which means the server will not be able to process any other
request till ReactDOMServer.renderToString completes.

[...]

Using Pre-Rendered CRA addresses both the SEO and performance concerns around
using CRA without the complexity that Next.js introduces_

[1] [https://codeburst.io/next-js-ssr-vs-create-react-app-
csr-745...](https://codeburst.io/next-js-ssr-vs-create-react-app-
csr-7452f71599f6)

~~~
strictnein
Acronym translations:

    
    
       SSR: Server-side rendering
       CSR: Client-side rendering
       CRA: create-react-app

------
kowdermeister
Here's the PR to Webpack:

[https://github.com/webpack/webpack/pull/8609](https://github.com/webpack/webpack/pull/8609)

------
seddin
@zeit employees are some really talented developers

------
jackweirdy
Interested to see serverless as part of a web framework. My understanding was
AWS Lambda and similar platforms were best for asynchronous workloads, but for
web stuff the cold start could be too long for things to feel snappy. Has that
changed recently?

~~~
timneutkens
It actually works really well for render workloads like server-side rendering
too, the reason for this is that rendering can be quite expensive and blocks
the thread. With Serverless you're able to scale the renderer to infinite
instances.

The cold-boot problem is an interesting one, it's heavily correlated to the
serverless function size, this is why we implemented a complete output target
for serverless, to output the smallest possible function that is completely
standalone, no dependencies. This makes cold-boot considerably faster. For
example on [https://next-news.now.sh/](https://next-news.now.sh/) it's hard to
tell the difference between cold-boot and warm functions.

~~~
jackweirdy
That’s interesting thanks - I didn’t know this. And thanks for the example
site too! Definitely feels snappier than I anticipated.

------
proyb2
One concern on mobile where I find the scrolling is not respond for a second
or longer whenever I swipe back to previous page in Safari, applicable in some
of the showcases in Next.js too, is it the expected user experience?

~~~
tracker1
People are calling out the routing issues specific to next.js ... I am not
using that, but am using react with redux and routing (connected-react-router)
and haven't experienced the types of issue you mention. Though many on here
point out that next.js routing is a major shortcoming.

------
seddin
If you are going to use it as a static site generator, you should also try
Hugo + the Mainroad theme, generated files are super light and easy to style
as you wish.

------
andreareina
So the tutorial requires me to login with github? Sorry, not gonna happen.

~~~
dirkc
You can still access the content without logging in, just use the navigation
on the left rather than clicking on "login & start". It does feel pretty
aggressive of them to want you to log in.

~~~
deltron3030
The content that is accessible through the navigation seams to be only a
teaser for the content that is hidden behind the login.

------
gtycomb
How similar is this with Nuxt.js?

~~~
viiralvx
Next predates Nuxt, so Nuxt was inspired by Next.

Next = SSR + React Nuxt = SSR + Vue.js

~~~
gtycomb
thank you, this helps. The question comes because I do not have a handle on
react.js and I do know something about Vue.js.

