What is front-end rendering? What is server-side rendering? Differences between them and their application scenarios

Take a product list page as an example.

Front-end rendering: it should be said that when you first enter the page, the data of the commodity list will not be given to you, nor will it be rendered. Then when loading the script, start another interface through ajax or fetch, and the server returns json data of the commodity list to you. You use the template engine in js and other technologies to spell these data into html strings and insert them into Dom.

Server rendering: the server renders the product list information of the page with the smarty template of php or jsp of java, and returns an html to the browser.

Difference: If the page needs spider crawling, the data rendered by the front end cannot be crawled, but the page rendered by the server can be crawled. If there is SEO demand, it can only be rendered by the server. If you render with Node.js, there will be no such problem.