seo Question posted in
Some basic information to get you started with this can be found here.

Single page web app (SPA) link/refresh routing design considerations and caching – SEO

What is the recommended practice of sending the SPA code to the client with routing considerations? How to send the SPA code to the client when they go directly to a link (e.g. website.com/users/user1) rather than the root path first.

An example best illustrates the question:

The path website.com/users/user1 responds with some application/JSON so that the SPA can fill in the layout with the information.

Let’s say that you have a basic SPA and you are making a request on website.com/users/user1 (assume no auth is required) without having first visited the root path where it is clear that we can send the SPA code (html, css, javascript) to the client and then they can make their requests to the different routes through the web app. So the user visits websitename.com/users/user1 and the server doesn’t know whether the client needs all of the SPA code first or just the JSON (maybe the most recent version is cached, or they are visiting website.com/users/user1 after having first visited website.com/ which knows to make a specific request to the server and ask for the JSON).

How is this typically handled? Is a flag, date, or something else sent to the webserver with the SPA so that the server knows the client has the SPA code? This could be done via the SPA requesting a content type of application/json on the route rather than a standard GET request? Or setting a header that the SPA sends back denoting its most recent version (this way we can use caching and if it isn’t the most recent, or there is no SPA yet, a new version may be sent).

How is it recommended that the SPA handle this? Does the SPA check the URI and note that it has only just received the SPA code from the server and not the actual content from the server (e.g., user1’s information). And how is it recommended that we check this? The server sends back the SPA code and sets a header denoting that the SPA needs to make another request to website.com/user/user1 to actually retrieve the actual JSON of user1’s info rather than the SPA code.

EDIT: I have eventually come across this SO question and the answer more or less addresses all of my questions: How to make a SPA SEO crawlable? There are obviously many ways to handle this on both client and server side and I wanted to see the different ways people addressed the issue. (I like the way that the aforementioned question/answer deals with the issue and will likely use a similar scheme.)

Tags:

2

Answers


  1. 0

    I don’t know what your stack is, and I can’t really speak to recommended practices, but I use webpack for this. In webpack, you accomplish this by defining multiple entry points. This splits your code into different self-contained packs, so you can have different .html files that produce different code bundles.

    Adapting your situation to the appropriate webpack config:

    {
    entry: {
        main: "./index
        user1: "./users/user1",
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
}

    Then, in the appropriate html, you’d load user1.entry.js

    I am not sure how extensible this is for a situation where each of your users has their own dedicated URL (obviously you can’t name a unique entry point for hundreds of users), but at that point I’m not sure what you have is technically an SPA.

    You can also consider using a routing solution similar to react-router, which allows you to grab data from the URL. eg, w/ a webpack config like above, navigating to example.com/users/user1: 

    users.html/users.js:
  loadJSONFromServer({url-user-id})
    Login or Signup to reply.
  2. 0

    I believe what you are asking is, how does a user visit a page that is not the home page (maybe through a link that was shared) and the app get the data it is supposed to display on that page.

    They way I typically accomplish this is to initiate a data fetch in the lifecycle method componentDidMount that evaluates what data is already present, and fills in the missing pieces. You could accomplish something similar through react-router’s onEnter hook (which is how I handle user auth in an SPA).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search