search

MetabolicAtlas / MetabolicAtlas

Open source genome-scale metabolic models of human and model animals
https://metabolicatlas.org
GNU General Public License v3.0
20 stars 2 forks source link

Consider adding SSR for frontend #634

Open e0 opened 3 years ago

e0 commented 3 years ago

As a user, I would like to have pre-rendered pages, so that they load faster and are easier to find.

This is related to the "Findability on the Web" improvements. For the gem browser pages for example, the current implementation loads the page first, then makes another request to the API to fetch the relevant component data based on the URL params. Only after this request is made do we update the HTML meta fields and most search bots and link previewers would not wait for these to be updated.

To get around this issue, server-side rendering (SSR) could be used to pre-render all of the pages. So instead of having the browser first load the page and then request the component data, the server would load the data and render the full page for the user in one request. Not only would this help search bots recognize all the meta fields, it should also improve the page load times, especially combined with the Nginx cache and Cloudflare.

This would require some changes to the infrastructure. For example using a node docker image in production for the frontend. SSR can be integrated to Vue.js "by hand" or using a framework that is built on top of Vue.js such as NuxtJS.

Related comment: https://github.com/MetabolicAtlas/MetabolicAtlas/issues/614#issuecomment-862290851

mihai-sysbio commented 3 years ago

most search bots and link previewers would not wait for these to be updated

A quick look at https://search.google.com/structured-data/testing-tool seems to detect the json-ld just fine

e0 commented 3 years ago

most search bots and link previewers would not wait for these to be updated

A quick look at https://search.google.com/structured-data/testing-tool seems to detect the json-ld just fine

That tool acts a bit differently, I think it waits for the requests to be resolved. See: https://socialsharepreview.com/?url=https://dev-metatlas.csbi.chalmers.se/explore/Human-GEM/gem-browser/gene/ENSG00000136010 or try sending a link on slack.

mihai-sysbio commented 3 years ago

Oh but then I'd consider the purpose to be something like "improve shareability of links" (as long as several search engines wait for the json-ld to load), eg:

As a user, I want to see previews for links, so that I feel more encouraged to share these.

e0 commented 3 years ago

Oh but then I'd consider the purpose to be something like "improve shareability of links" (as long as several search engines wait for the json-ld to load):

As a user, I want to see previews for links, so that I feel more encouraged to share these.

As mentioned in the description it's also about how the search results look like. So not just for sharing but also for discovering. The page load improvements is also included here. I agree that having "to have pre-rendered pages" sounds a bit technical though.

mihai-sysbio commented 3 years ago

As mentioned in the description it's also about how the search results look like.

I think the findability relies on a different technology (ie schema.org) than the preview, but good point that the preview is not only for sharing links but also for presenting the links in search engines.