DEV Community: Raja Singh

Server Side Rendering Vs Client Side Rendering

Raja Singh — Wed, 02 Sep 2020 09:45:27 +0000

How Client Side Application works?

The user sends a request to a website.
The browser downloads the HTML and then the JS. Meanwhile, the user sees a loading symbol.
After the browser fetches the JS, it makes API requests via AJAX to fetch the dynamic content and processes it to render the final content.
After the server responds, the final content is rendered using DOM processing in the client’s browser.

Since this process involves fetching and processing data on the client-side, the process is called client-side rendering.

Client Side Rendering ( CSR )

In client side rendering with modern browsers, websites send very little HTML response to connection requests. This HTML response contains JavaScript codes that make up the content of the page. Unless these JavaScript codes are executed, the website is a blank page. The browser renders these JavaScript files, creates the content, and presents the web page to us.

Problems in CSR

SEO
Google crawlers do not understand JavaScript well. The Search Engine Bot is only able to handle apps with loading time around 300–400 ms.If loading takes longer, Google Bot sees a blank page.
Long Loading Time
Nobody likes to wait for the content to appear. Heavy apps are often too slow, frustrating, and less competitive, if not maintained well.
Users with medium-price devices or slow internet connection will definitely have a struggle and more probably will complain about the poor UX.

How Server Side Application works?

The user sends a request to a website.
The server checks the resource, compiles and prepares the HTML content after traversing through server-side scripts lying within the page.
This compiled HTML is sent to the client’s browser for further rendering and display.
The browser downloads the HTML and makes the site visible to the end-user.
The browser then downloads the Javascript (JS) and as it executes the JS, it makes the page interactive.

Server Side Rendering ( SSR )

In Server Side Rendering, all the burden of getting the dynamic content, converting it to HTML as a readable HTML response, and sending it to the browser is on the server. Hence, this process is called server-side rendering (SSR).

Benefits is SSR

Search Engine Optimization
Social Media Optimization
Performance: Server side rendered pages will load faster if the user network bandwidth low
User Experience

Conclusion

If you have suggestions please let me know in the comments section🙋‍♂️
Thank You!🖤
Please find the GitHub Repository for Java script Framework

For Angular Universal Server Side Rendering
For React Universal Server Side Rendering

GraphQL Server with Deno and Oak Framwork

Raja Singh — Fri, 03 Jul 2020 16:15:24 +0000

In my previous topic, I have explained about below things

What is GraphQL?
Comparing REST API and GraphQL
GraphQL Terms

Creating A GraphQL Server With Deno

Our Deno dependencies

Oak : A middleware framework for Deno’s http server, including a router middleware.

Oak-GraphQL : A simple graphql middleware for oak deno framework.

GraphQL-Deno : This is a one-to-one port of graphql-js to Deno. It is working, fully adapted to Deno and exports both TS types and JS code.

First we are making the basic deno server with oak framework and oak_graphql. We are creating the common dependency file for import packages.

GraphQL Schema

A GraphQL schema is a description of the data clients can request from a GraphQL API. It also defines the queries and mutation functions that the client can use to read and write data from the GraphQL server. In other words, you specify your client or application UI data requirements in your GraphQL schema.

The schema is written using the GraphQL schema language (also called Schema Definition Language, SDL).

With it, you can define object types and fields to represent data that can be retrieved from the API as well as root types that define the group of operations that the API allows.

Object Types

Root Types

The root types are the query type, mutation type, and subscription type, which are the three types of operations you can run request from a GraphQL server.

Let’s go ahead and create a schema. Add a new file src/schema/author.ts with the following content

What we have above is the GraphQL schema. In it, we defined a Author type with four fields, Post type with five fields and a root Query type with two fields.

GraphQL Query

The two fields in the root Query type defines what queries/operations the server can execute. The getAuthor return a Author based on the id passed as an argument to query. The getPost return a Post based on the id passed as an argument to query.

GraphQL Mutation

The GraphQL Mutation is used to perform the Create, Update and Delete Operation. The createAuthor, createPost perform the insert operation based on Input object.

Resolver

Our API is able to run two query operations

one to retrieve a Author with Array of Author’s post based on its id and another one retrieve a Post based on its id. The next step for us is to define how these queries get resolved so that the right fields are returned to the client.

GraphQL has an execution algorithm. The implementation of this execution algorithm is what transforms the query from the client into actual result, by moving through every field in the schema, and executing their “resolver” function to determine its result.

Add the below code to src/resolver/author.ts

Every resolver function receives the below four arguments

parent : It contains the result of the previously executed resolver in the call chain.
args : These are the arguments provided to the field in the GraphQL query. Following our example, this will be the id argument for the getAuthor query getAuthor(_id: ID): Author.
context : This is an object that every resolver can read from or write to. You can keep objects that give access to database or that contain information from the HTTP request headers here. The context object is the same across resolvers, and you can write contextual information to it as needed.
info : It holds field-specific information relevant to the current query as well as the schema details.

GraphQL Query Language

Open the command line and run the below command

denon run --allow-net --allow-env --allow-write --allow-read --allow-plugin --unstable server.ts

Now the server running on http://localhost:8080/graphql

Conclusion

If you have suggestions please let me know in the comments section🙋‍♂️

Thank You!🖤

Here is the GitHub Repository for all the source code.

In the next section will be covering following things

GraphQL Subscription
GraphQL with Client side Integration with React JS

Deno with GraphQL

Raja Singh — Sun, 21 Jun 2020 13:22:48 +0000

What is GraphQL?

GraphQL is designed by facebook. GraphQL is a query language designed to build client application by providing an intuitive and flexible syntax for describing their data requirement. The main goal behind the graphQL is define the query smart.

Comparing with REST API vs GraphQL

Now i will compare with restaurant. Here i would be comparing the REST API with self serving restaurant. In GraphQL I would be comparing with restaurant served by waiter.

REST API

In Restaurant when served as buffet restaurant, you get up from table, and go to each and every table select the desert, fruits, vegetables, something like that.
GraphQL

But in Restaurant which served by waiter, just sitting on the table and ask i need fired rice, i need pizza. And waiter go to every table and take every require desert and serve to you.

In GraphQL the word “Graph” means just The queries crawl into REST API and pick up the selective data “QL” means Query Language

It’s more flexible than REST APIs because it allows frontend clients to request exactly the data format the client needs. REST APIs on the other hand typically send back a fixed data format that often contains redundant data which is not required by the client.

In Rest API we are using multiple end points like below

POST /createuser
GET /user/:id
GET /users

But in GraphQL we are using only one end point

POST /graphql

Queries

A GraphQL query is used to read or fetch values. GraphQL queries help to reduce over fetching of data. Unlike a Restful API, GraphQL allows a user to restrict fields that should be fetched from the server.
Query act as GET method in graphQL

Mutations

A graphQl Mutation used to modify the server side data. It can be used to insert, update, or delete data. Mutations are defined as a part of the schema.

Mutation act as POST / PUT / DELETE method on graphQL

Schemas and Types

GraphQL requests are about selecting fields on objects.The GraphQL schema provides a clear contract for client-server communication.

Here is the simple GraphQL demo with Deno.

I will briefly explain about GraphQL with Deno and React Client in my next article

Thank You!🖤