DEV Community

Sawda Hoque
Sawda Hoque

Posted on

#Server-Side Rendering Vs Client-Side Renderin

Server-Side rendering
Server-side rendering is the most common method for displaying information onto the screen. It works by converting HTML files in the server into usable information for the browser.
Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. Once the request is done processing, your browser gets back the fully rendered HTML and displays it on the screen. If you then decide to visit a different page on the website, your browser will once again make another request for the new information. This will occur each and every time you visit a page that your browser does not have a cached version of.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Website</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>This is an example of my new website</p>
    <a href="https://www.youtube.com/other.html.">Link</a>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Client-Side-Rendering
client-side rendering means rendering content in the browser directly using JavaScript. This is a relatively new approach to rendering websites, and it didn't really become popular until JavaScript libraries started incorporating it into their style of development.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <div id="root">
    <app/>
  </div>
  <script src="https://vuejs.org" type="text/javascript"></script>
  <script src="location/of/app.js" type="text/javascript"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)