Understand two major web development patterns

1. Traditional rendering based on server Web Development mode

Server rendering ： The message sent by the server to the client HTML page , Is the splicing of strings in the server , Dynamically generated . The client is only responsible for parsing HTML .

advantage

• The front end takes less time . Because the server side is responsible for dynamic generation HTML Content , The browser only needs to render the page directly . Especially the mobile end , More power saving .
• advantageous to SEO. Because the server-side response is complete HTML The page content , So it's easier for reptiles to get information , Better for SEO.

shortcoming

• Occupy server-side resources . That is, server-side completion HTML Splicing of page content , If there are more requests , Will cause certain access pressure to the server .
• It's not conducive to the separation of front and rear ends , Low development efficiency . Use server-side rendering , be No division of labor , Especially for Projects with high front-end complexity , It is not conducive to the efficient development of the project .

2. A new model based on front and rear end separation Web Development mode

Fore and aft end separation ： The back end is only responsible for Provide API Interface （ Handle 、 Store the data ）, Front end use Ajax Call interface （ Display the data ）. Front end and back-end developers through Interface Exchange of data .

advantage

• Good development experience . The front end focuses on UI Page development , The back end focuses on api Development of , And the front end has more selectivity .
• Good user experience .Ajax The wide application of Technology , Greatly improve the user experience , You can easily achieve local refresh of the page .
• Reduces the rendering pressure on the server side . Because the page is ultimately generated in each user's browser .

shortcoming

• It's not good for SEO. Because the whole HTML The page needs to be dynamically spliced at the client , So the crawler can't crawl the effective information of the page .（ Solution ： utilize Vue、React Wait for the front-end frame SSR Technology can solve SEO problem ！）

3. How to choose Web Development mode

• For example, enterprise websites , The main functions are Presentation without complex interaction , And need good SEO, Then we need to use Server-side rendering ;
• But similar Back office management projects , The interaction is relatively strong , There is no need to consider SEO, Then you can use it Fore and aft end separation Development model .

Be careful ： What kind of development mode is used Not absolutely , In order to take into account the rendering speed of the home page and the development efficiency of front and rear end separation at the same time , Some websites use First screen server rendering + The front and back of other pages are separated Development model .