DEV Community

Sawda Hoque
Sawda Hoque

Posted on

1 1

#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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs