Static Generated Sites

Differences Between Static Generated Sites And Server- Side Rendered Apps

There are three types of application in JAVASCRIPT, these are: Single Page Applications (SPAs), pre-rendering/ static generated sites and server-side rendered applications. Last two types are easy to use because there are no problem of SEO which is found in first one.

In this article I am going to explain about three things:

i) What is pre-rendering/ static generated sites? ii) How Gatsby and VuePress framework helps to create those sites? iii) What is server- side rendered and how Nextjs and Nuxtjs framework helps to create them?

1. What is pre-rendering/ static generated sites?

Static Site Generator( SSG) is a software created by HTML page which generate website from given file and content. You can update your site by adding new content.

Data/file/templates/content--------> Static site generator------>website.

If the content does not change according to user, then it is very useful for personal blogging.

Advantages:

• Time saving: It is very easy to generate a website without API calls to the server.

• Easy to Deploy: After creating a static file, you could left the page and develop an easy platform like Netlify.

• Security: As the site do not have any database, so cybercrime is minimal and none can exploit your database.

Disadvantages:

• The contents become day-old if you rapidly change those. • For updating content you should rebuild the site. • Building time increase simultaneously with the size of the content.

GATSBY

It is a free and open source framework based on React which help to build blazing- fast websites and apps. • To use it, first install it using NPM:

npm install –g gatsby-cli

• After installing it, static site generator can be created by the following commands.

• You can name your new Gatsby project by your own

• Then your app sever can be started by the following command:

gatsby new demo-gatsby

• Here we looking for src/pages folder which would generated into routes on your site.

cd demo-gatsby
gatsby develop

VUEPRESS

It is a static generated site powered by Vue, Vue Router and Webpack. You will get here a huge number of tools. It is the best among all the framework because it make easy to create and maintain documentation foe their projects.

//globally

yarn global add vuepress # OR npm install -g vuepress

//in an existing project

yarn add -D vuepress # OR npm install -D vuepress

• You have to first install it .

• The command can be run in your terminal.

# create the project folder

mkdir demo-vuepress && cd demo-vuepress

# create a markdown file

echo '# Hello VuePress' > README.md

# start writing

vuepress dev

• To create a folder, add file to README.md with #Hello Vuepress which include the file, and then start the server. • Update your README.md by the following commands:

VuePress supports VueJS syntax and markup inside this file. Update your README.md file with the following:

# Hello VuePress

_VuePress Rocks_

> **Yes!**

_It supports JavaScript interpolation code_

> **{{new Date()}}**

<p v-for="i of ['v','u', 'e', 'p', 'r', 'e', 's', 's']">{{i}}</p>

• In browser your page should look like

• To add a new VuePress site you have to add a markdown file to the route and give a name of your choosen.

What Is Server-Side Rendering? (SSR)

It is a process of displaying web page to the client. Sever site page takes over JavaScript to the client and and allow SPA framework to operate it.

If you made an application through it, your browser us displayed by user. So, the users have to wait for some second to locate the content. The application which made it possible is known as Server-side rendered applications.

• This approach is good when content have to change frequently.

• It is based on clients interaction for complex content.

• It is very fast, updated content is visible by the client whenever they are uploaded.

• It is very good application depending on viewer, it store user specific data like email and follow SEO.

• It is very useful for ecommerce sites and social media.

Advantages

• Contents are updated accordingly user.

• Contents uploaded fast as it fetch on server site before visible by user site.

• For better performance user should rely loaded time as javascript render on sever site.

Disadvantages

• Need to attend more API calls as customer made their request

• Static CDN cannot be deployed

NEXT.JS

It is built on React and it helps in building static sites, server-side rendered applications.

For creating Next.js app, you need to run the following:

npm init next-app
# or
yarn create next-app

• You have to choose a name then a template to begin a set up for your app.

• Browser is looked like

• After rendering the page you should open the file from pages/index.js, and then modify the JSX inside the Home function, then it would displayed by browser.

• For adding new page in the app new file is added inside the /Page folder structure. For automatic creation folder may look like-

 -- | pages
---- | index.js ==> ‘/’
---- | about.js ==> ‘about’
---- | projects
---- | next.js ==> ‘/projects/next’

• To add a link to index.js we use Next’s Link component.

#index.js
import Link from ‘next/link’
 
#Add this to your JSX
<Link href=’/hello’>
<Link href=’/hello’>
<a>Next</a>
</Link>

• To go back to the first page click on the above link.

NUXT.JS

It is a very powerful framework for creating modern website containing Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). If make web development progressive and full of experiments. It is based on Vue.js developer which is very easy to start.

• To develop Nuxt.js app, you should run the following command in your terminal:

yarn create nuxt-app <project-name>
# or npx
npx create nuxt-app <project-name>

• It is started by selecting a name.

• Then open your app folder on open pages/index.vue. Every file turned into a route and controlled byindex.vuefile.

• Then run your application by

• To see this page containing content you have to add index.vue

Difference Between Static Sites Generators and Server-Side Rendering.

Static Sites Generators

• Easily deploy to a static CDN

• Building time is required

• Can be stale quickly

• Very few APIs calls

Server-Side Rendering.

• Cannot be deployed to a static CDN

• Content changes as per request

• Always up to date

• Must be attened API calls when new page is visited.

Conclusion

Static generated sites and server-side rendered applications are the same and very easy to use. I would like to advise that try the, build your website and do some experiments with clients, understand their applications and differences.

We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs.

As a reputed Software Solutions Developer we have expertise in providing dedicated

remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!