Questions about Progressive Web Apps... can you help?

1

I have created a website with React, but the website is rendering on the front end, and it isn’t much help for SEO or adding Open Graph tags for social media.

One way to fix it is to go with SRR (Server Side Rendering) using Webpack and babel.

Another way to fix it?

Could it be possible to convert a client side rendering React-App to a Progressive Web App what would do SSR instead? …Or… do I still need to convert the CSR into SSR before I convert the site into a Progressive Web App?

2

Progressive Web Apps is a blanket term used to apply to web apps that leverage APIs that make web apps feel more “native”. Such as offline mode, and push notifications. You can make any website a progressive web app regardless if its server-side rendered or client-side rendered. However due to the complexities involved in most of the features, you will probably need client-side code to leverage most of the PWA features.

You can read more about the entire concept here:

Generally you can try out different parts of the PWA ecosystem at a time. So if your focused on SEO, you can leverage that part without worrying about the more advance features.

The main issue with React and in general Single Page Applications, is that most search engines don’t run the JS on the page, they only pay attention to the HTML. Since React is in charge of rendering all of the HTML after JS is ran, React, and thus SPAs don’t usually get great SEO scores.

As you mentioned Server-Side Rendering can help with this, and there are “hybrid” options like next.js that SSR and then “hydrate” the code on the client-side to get the best of both worlds.

There’s also “static rendering” options, where you take an SPA framework like React, and essentially “bake” the render and ship out the final build using a technology like Gatsby. This usually results in the fastest possible render time (as it’s just static HTML) but is limited depending on the use-case. Checkout the concept of a “JAMStack”, which is what Gatsby could help you build.

React is popular, and its techniques are very flexible. Pure SSR and pure SPA (or Client-side Rendering) are just 1 of many options out there for a JavaScript based solution. Ultimately each different solution can have different pros and cons, so depending on what you’re doing you may want to focus on different technologies.

Or it’s possible you want to mix and match with different parts of a project, in which case you can leverage the right technologies for the right parts. Such as a public landing page being built in Gatsby, but the actual product/service-UI is built in traditional React.

Hope that sheds some light on other options :slight_smile:

Good luck, keep building, keep learning :+1:

1 Like
3

Thank you much for your answer, Brad.

Excuse me a ton, are you saying I can convert the regular CSR React App to a PWA and fix my SEO issues?

I noticed this link:

^^^ This seems exactly what I am looking for …

Questions:

Where could I ask more questions about how PWA work?

Would the search engines be able to not just read my meta tags, but read the entire page as well?

Would the search engines be able to read data extracted from MongoDB and presented on my page on chart?

4

An “app” implies it only has a single page, so search engine indexing of individual screens in that app is redundant, you only have a single web page. A progressive web app, as @bradtaniguchi says, is a term used to describe a web app using features that make it feel more “native”. Apps do not get indexed: that’s an oxymoron, they are a program you download to your device and use.

Search engines index web pages, ie websites. A website has discrete web pages. What may be confusing you here is that very often a client-side router is used in single page apps, for example React Router. What that does is allow you to use a browser’s URL history functionality to render different components based on the URL string. For example:

  • If the URL is just example.com/, render the <Dashboard /> component.
  • If the URL is example.com/users render the <Users /> component.
  • If the URL is example.com/users/123 render the <User id="123" /> component.

It doesn’t mean that different parts of the app are different web pages.

So server side rendering of React can be used to produce websites, with discrete web pages: there are several meta frameworks that are geared towards this, NextJS being the current most popular.

1 Like