Best way to make use of Server side rendering - node.js

I would like to learn Server side rendering and while searching in google,i've seen many topics about a framwork called nextjs,and after trying it,i found it pretty good.SO now i would take a serious course on SSR,but after a search on Udemy I've found a course which is rated 4.7/5 of Stephen Grider,but in the course content i've not seen next.js.Here is the course link : Server Side Rendering with React and Redux.
I don't have much experience with SSR,but it seems that there are two ways to make it:With React,redux,node/express or Next.js.
When i've tried next.js,i've not used react-router but in the description of the courses of udemy,the instructor talks about using react router.
I really need your advices before i learn it seriously,and i need to know the best solution between the 2 approches.

I guess you have done a very good research, the two options you have stated in your post are mainly the best available ones out there.
To me, if I am starting a new project, I would love to do it with React, Redux and Express.js instead of using Next.js
It will remove the complixity of learning a new thing, which is the first plus of picking that up.
I had to migrate a living 2y'o project to Next.js, the structure was a little bit not-expected for me, the routing system kinda sucked at the beginning of it, persisting layouts around the app was tiresome, forgetting about react-router was painful too.
In the course, I guess Stephen is welling to do client-side routing via react-router and implement something like express at the server-side to do SSR, I don't believe that will make it any easier.
While am saying that, it was very a interesting experience that I have gained doing the Next.js migration, I've learned a lot about SEO and SSR because of the troubles I had to run through.
I learnt to be careful about what should I use building my components and where should I use them, what packages can harm my app and what buggy bugs can prevent it from doing a correct SSR.
The smartest pick you can choose is sticking with React, Redux and Node/Express stack, instead of shifting -away- to Next.js
I have seen the contributors there doing a very great work, but, maybe am not yet sure how long they can survive!
Sorry for not being obvious on anything, just wanted to share what I thought.

Related

Edited: Why was learning Fullstack React confusing?

Update: When I first started with this question I was basically struggling to understand what I needed to do in order to make my frontend interact with the backend.
To answer my own question in case new guys come in:
If you use ejs, you are using server side rendering, meanwhile if you work your frontend separated your backend, you'll mostly be working with APIs.
First learn Node. Than work your way through on how APIs work. After feeling comfortable, start learning React.
Yes its normal. Just start building a project or else you'll stay in that tutorial hell.
So I have basic knowledge about React, intermediate level on javascript... and now I have taken a node with mongodb course. So I know that, i'll be feeding my tutorial hell if I do not put all those together and start building something from scratch. But till now, I have only rendered the EJS files and know how to setup everything from the ejs view point.
So now I feel quite lost as if someone gave me a puzzle with missing pieces.
I know some of you guys have taken this road so I have a couple of questions, even though some sound quite stupid:
How can node code be affected introducing reactJs, because I am currently using res.render('ejsViewFile')?
When you guys first learned this approach for using the MERN Stack, how did you learn to connect both of them? I find a lot of tutorials... but they confuse me even more.
Is this normal... me feeling like I have learned absolutely NOTHING?
It's great to see such type of questions.
I have also developed web application in which I have to just use the node JS and react with multiple microservices.
so I am also going through from such tutorials on udemy and other tutorials that are available on the website.
I found out that you can use react JS as a front UI and you can use node JS for backend if you don't want to use spring boot for your microservices it is just fine.
So basically I have developed rest API in node JS and using axios and promise I am calling that API from my react applications so I think in that way you can connect both of the applications.
in most of the applications I have seen that node JS is used for security purposes in the following purposes and then node JS is connected to a microservice it is just kind of adding another layer over your application.
I prefer lead can tell you that you can go through the udemy courses of react JS and it will show you how you can create a rest API on the node JS.
React for UI
Nodejs: api gateway or backend. You wish
Java : microservices, rest apis

Hide React components on server

To the point, I'm working a React app that has "levels" where users have to completely some tasks before then can move on to the next one. And for obvious reasons I can't use client-side js to verify and advance the user to the next level.
I believe that a server should handle this, but I'm stuck on how to go implementing this. I've tried Googling for this but I'm not sure if I can accurately put this into keywords. Some of my current thoughts:
Render React components of each levels to static html then serve this page when the correct request is made to the server (https://reactjs.org/docs/react-dom-server.html). As my whole app is running client-side now, I'm worried that this will complex things a lot more.
Keep all the components client-side but only return the link (route) to the page if a request is made to the server. This way someone extremely motivated can still see all the pages without completing the tasks.
I believe there should be an obvious answer to this question but since I'm relatively new to React, I'm not sure what it is.
Thanks.
React is a client-side framework. Meaning it is run and rendered in the browser.
When you talk about "the server" you are needing to implement a backend framework (i.e. RoR or Express), this is something you will have to learn independently. There are many tutorials online that are free.

NodeJS Skinning

Is there a module or similar things that support skinning in NodeJS? I want to build a NodeJS website, and want to be able to re-skin the website as I like without much efforts, like in Wordpress.
Is skinning supported in NodeJS?
If you're interested in building a website in Node.js and don't need a wordpress-style cms behind it, there are few projects that can help you out.
Have you looked into Bootstrap? It's built with less which you can easily plug in to your Express setup (see the guide here, using the command line executable to set up a new project you can specify less like this: express --css less myapp and it will do all the work for you)
In the bootstrap less file are several variables you can use to change the colours, fonts, sizes, etc, and it's also got a lot of helpers for grid layouts and responsive designs.
It even includes a few useful javascript plugins too which make the ui nicer with less work.
There are also a lot of sites with themes and theme generators around which then work on top of bootstrap, and may achieve what you want.
Plugging in this sort of solution (whether bootstrap or other) is about as close as you can come to getting skinning for node; As otherwise suggested if you're looking for a CMS out of the box as well, probably best to look for another platform like Wordpress.
Node.js is not a content management system. It is a platform on top of which you could built a web server with a content management system. To answer your question you need to be looking for node.js based content management systems that support themes.
The only node.js CMS that I am aware of is Calipso. It's still pretty alpha-stage. It may have some theming support, but it is nowhere near as polished as Wordpress.
Also is there a reason why you want to use node.js? I mean there is nothing wrong in using Wordpress for creating a themeable website - it is just awesome for that.
If you just want another OnlineShop, or maybe a blog, i think nodejs is maybe not your right choose as Jed Watson told.
If your requirements are more complicated, and you want a quick and easy implementation of a nice web interface, and you have html, javascript, and css knowledge... I strongly recommend you just trying to work with MEAN.js
It puts together MongoDB Expressjs, AngularJs, and NodeJs.
Use this, for example with a yeoman fullstack constructor and you will have a powerful webapp, with user autentication, and much more in a few minutes.
After that, the use of jade, less, scss, and similar languages of modelling the front, and the easy way you can also model collections in the back, is for me the best combination you´ll find for creating a website today.
Hope it´ll help you
King Regards

Integrating Angular.js with Node.js (Express+Tower.js)

I am new to node. I very much like approach of AngularJS. I like what I see in towerjs.
Has Anyone wired the two together? I have in mind tower primarily for backend api/rest and angular for clientside.
I'm especially not familiar with tower.js, but from the docs it looks like it might not be practical to use the two together. There is quite a bit of overlap in the things AngularJS provides and the things tower.js provides (especially models, views, and controllers on the client).
I've written on how to use AngularJS with a RESTful API provided by Express on my blog. Maybe that can help you get started.
Good luck! :)
Tower is for the server-side while angular is on the client right?
So what you could try what is mentioned here. Just replace railway with tower.
You could check this brunch.io skelleton that uses angularjs.
Hope this comes in handy mate!
As things are evolving very fast, there are some major update.
For example, a framework named Total.js has made much work to make Angular.js work in hand with Node.js.
Please have a look at their web site http://www.totaljs.com/totalstack/ and at the 6 (!) example they provide on how to use it : https://github.com/totaljs/examples.
Pretty amazing! Hope that helps!
Note: I have no affiliation with Total.js at all.

Building a web site with photo uploading possibilities with node.js

I'm new into Node.js and my intention is to build a web site similar (but way less complex) than Imgur, where uploading images is possible by dragging photos from desktop to the browser.
For this I want to use Node.js and MongoDB.
I have been looking around everywhere and found a lots of tutorials (many of them out dated) for setting up a database, but none for file uploading. Node.js and all it's modules is like a jungle, and it really isn't easy to know which modules to use in which type of context.
So, what I really could use here is some help with suggestions of tutorials and/or modules that may fit for this purpose. What is the easiest and best way to get started with this?
This is a school project that I need to do (I selected Node.js for server side myself, not knowing how complex it really is and now it's to late to change), so I would really appreciate your help here.
Thanks in advance!
You can get away without using most of the node.js modules aside from the mongodb driver. Express is a popular framework for web applications, but it might even be overkill here. Really, you just need to serve some HTML with the drag and drop code, and then be able to receive and serve images. It's probably less than 50 lines of code in actual node.js, plus whatever frontend code you have.
Check out this tutorial for the image upload portion on the node.js side using express:
https://github.com/visionmedia/express/blob/master/examples/multipart/app.js
Here's a tutorial for the frontend drag and drop functionality:
http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/
Update You might also consider http://mongoosejs.com/, which makes mongodb interaction a bit easier--but the native driver isn't too bad to use by itself.

Resources