search

Urigo / WhatsApp-Clone-Client-React

https://www.tortilla.academy/Urigo/WhatsApp-Clone-Tutorial
https://tortilla.academy
614 stars 144 forks source link

[Suggestion] Using Next.js for automatic SSR #67

Open TechStacker opened 5 years ago

TechStacker commented 5 years ago

One thing I didn’t see mentioned anywhere in Eytan’s Medium article was server-side rendering (SSR). I assume that this means that the app is currently pure CSR, or? I apologize if I missed something.

Next.js is a lightweight React framework that handles SSR automatically, so I feel it would pair perfectly with this stack, for those that need great SEO? In fact, outside of SSR, this stack looks perfect!

I'm really excited about this project, especially when you said that you’re planning on consistently updating it. Looking forward to the step-by-step tutorial series! I’ll be watching this closely and I’ll provide feedback/help with what I can =)

Edit I just realized that a project like his probably doesn’t need SSR since it’s not really public facing by its nature haha.

Urigo commented 5 years ago

@TechStacker it's true that it doesn't necessarily need SSR, but I agree that it might be good to demonstrate. We want to add as many real world tools that we use into that app and tutorial, when we really see and can demonstrate and measure the benefits.

So in the case of SSR, I think there are 2 things here on top of my head:

  1. Faster initial loading times
  2. Better SEO support (which might be needed for let's say public forums and stuff)

Are you seeing more benefits we should take a look at?

In any case, the next phase is to measure those benefits. What are the best tools we can add that would help us measure initial loading times and SEO score and visibility?

Would anyone want to give a try in adding those tools and then adding Next.js or any other SSR solution here? It can be something very initial and we can collaborate on it here

TechStacker commented 5 years ago

@Urigo yeah Faster initial load and SEO are the two biggies for sure.

SSR also saves the end user’s hardware resources (CPU, RAM) because more rendering work is handled by the server as opposed to the client. How significant this is depends on how powerful the end user’s machine is and how resource draining the app is. It’s pretty noticeable on smartphones, how some websites tend to drain your batteri faster — especially if you don’t have the latest and greatest phone.

SSR is also required for proper social previews. If you paste in a link to a site without SSR, in Slack, Facebook, Twitter etc. then preview often won’t display properly.

I use these tools to measure performance:

GTMetrix

Pingdom Tools

Testmysite Netlify’s performance & security test

PageSpeed Insights by Google

Web Page Test

I also use the Chrome DevTools Audit tab to make a Lighthouse test on both Mobile and Desktop. This one also gives an SEO score

For SEO specifically: Moz Bar is the only one I find reliable atm.

Performance/speed is becoming more and more important for SEO. If we can make it faster for the Search Engines to index our content, it’ll improve page rank. Good info here https://moz.com/learn/seo/page-speed

SSR is pretty much a must-have in most use cases, and should probably be the default in most projects. No real downsides to SSR as I see it, and when combined with CSR (like Next.js does) you get the best of both worlds :-)

Urigo commented 5 years ago

We've just released a chapter about performance: https://www.tortilla.academy/Urigo/WhatsApp-Clone-Tutorial/master/next/step/17

maybe you can start with just taking master, cloning it to add Next.js into it and then we can think together how to integrate those changes into the tutorial?