DEV Community


Don't build your portfolio with just React

flexdinesh profile image Dinesh Pandiyan Updated on ・3 min read

TL;DR - Use React along with Gatsby or Next to build static public sites.

React is all the rage these days and IMHO developing websites feels a lot easier with React. Of course, you can use and favor other frameworks too but I'm gonna limit the context of this post to React affictionados.

Why you should use React

  • Component based
  • Pre-configured (for most part) starter with create-react-app
  • Faster development
  • React is AWESOME 🎉

Why you shouldn't use just React

Let's get a little more into why all these things happen.

React loads the site into DOM after this line is invoked.

ReactDOM.render(<App />, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode

What this means it, the whole DOM, styles and behavior of the site is initialized only after the bundle.js is loaded and executed.

If you turn off JavaScript in your browser settings and open a React site, nothing will load and you will see only an empty page.

Unfortunately that's how search engines look at your site during indexing. So if you create your site with just React, only your page title will be indexed and nothing else inside your React code will be indexed.

Edit: Google executes JavaScript during indexing to a limited extent, meaning if you don't have content in first render or if render takes more than N secs, it skips the content. Also DuckDuckGo is becoming the de-facto search engine to a lot of folks in recent times and it's been my only search engine for more than a year now. And DuckDuckGo doesn't execute JavaScript during indexing. So relying on search engines to execute JavaScript is not a safe bet.

Other than SEO implications, loading your site without the DOM in the first load (paint) increases your TTI metric. If you could load the DOM in the first load before loading your scripts, you'll drastically improve the UX.

SSR and Static Site Generation for the Rescue

SSR Websites and Static Websites are two different things. SSR pages are rendered from a server on each request where as static pages are generated during build time.

If you use frameworks like Gatsby or Next, you can either generate static sites or create SSR pages.

In other words, if you turn off your JavaScript and load these sites, the whole DOM will be loaded as the pages are already rendered.

Ideally, only event handlers and complementary data should be loaded and attached after the first render.

Gatsby or Next?

  • If you are building a static public website, Gatsby will be the right tool.
  • If you are building a website that has a login and a lot of server side logic, Next will be the right tool.

Of course there are a lot other options and reasons to choose your right tool but personally these two will be enough for most preliminary requirements.

Other points to argue

  • You can create SSR pages with React but you will need to setup your server and everything manually. Next.js makes this whole process easier.
  • Google claims that it executes JavaScript recently while indexing, but I tried and it didn't work for me. We're not sure of the nuances of it.

Gatsby is ❤️

In other news, I'm totally smitten and unfathomably in love with Gatsby ❤️

I migrated my old portfolio from React to Gatsby exactly for the reasons discussed in this post. This is my new portfolio in Gatsby - Dinesh Pandiyan.

Going forward, I'm planning to build all my side projects in Gatsby this year. I created a Gatsby starter boilerplate with added configurations over default Gatsby starter - Gatsby Boilerplate.

My Gatsby based sites so far

You are amazing! ✨

Discussion (18)

Editor guide
martis347 profile image
Martynas Kan

So if you create your site with just React, only your page title will be indexed and nothing else inside your React code will be indexed.

Dinesh, this is actually not entirely true. The crawlers of Google (and others) are actually quite effective with indexing javascript.

Google even provides a tool in the Google Search console where you can see how specific pages are viewed by the google bot. However to achieve that you need to be the owner of the website. Here's a link for reference:

flexdinesh profile image
Dinesh Pandiyan Author

I came across this as well but I'm quite not sure if auto indexing runs JavaScript.

I made my portfolio last year with React. I wrote a blog post about it and my portfolio received a lot of traffic. It was hosted in GitHub Pages for a year. If you search "Dinesh Pandiyan" in Google now, you will get the indexing result of my old portfolio from GitHub Pages and you can see only the page title will be in search result description. Although I didn't add any meta tags in my old site.

If you search the "Dinesh Pandiyan" in duckduckgo, you'll get my new site in the search result and you'll have the entire meta and everything else in the description.

I've also read somewhere that, during auto indexing, the crawlers only wait for x seconds and if your site's TTI is longer or if you load data during mount and render the original content only after second render, you're likely to not have the content indexed. Not very sure about this though.

martis347 profile image
Martynas Kan

This is true, the crawler actually waits for your content to render, and yes, if after N time there's still nothing rendered your site will not be indexed properly.

Regarding the issue you had with Github Pages, it might be that Github could be interfering with the crawling process, since your page is under the github domain (unless you're using a custom domain). OR your content was just taking too long to load :)

sethusenthil profile image
Sethu Senthil

I love react but I made my portfolio site using no web framework (HTML CSS and JavaScript) because I didn't know react at the time of making. My site is pretty good and converting to react would make it sm easier to code with but is it worth it? Nobody is really gonna notice a difference besides me?

toastking profile image
Matt Del Signore

The main reason to use something like Gatsby (in my opinion) is if you have something like a blog. The main use of an SSR is when you have something that would normally be dynamic (like a blog) that you don't necessarily need a backend to use.

flexdinesh profile image
Dinesh Pandiyan Author • Edited

If you could get things done without any framework, that's definitely 100x better than with framework. Your code is lighter without the framework code. Framework should only be a tool to get things done easily. You don't have to do it just because it's "good". Although, if you think your site is going to be faster if you rebuild it with a framework, then it makes sense. But for a portfolio, I don't think anyone's gonna notice if it was built with React/Vue/Vanilla. But if you're curious to learn the framework, then go for it. I learnt a lot of things in React and Gatsby by experimenting things in my portfolio.

timkor profile image

Of course employers notice when a candidate's portfolio is made with React, Vue or any other framework. It's the first thing they look at. At least for a frontend position.

maxwell_dev profile image
Max Antonucci

Also worth mentioning that for extremely simple React apps where you can build up from the bottom, there's Parcel. Although I'd mostly recommend it for people who want experience with getting all the React moving parts together and understanding how to do just that. It's rarely something used in production, I think.

Still, great article! I've also struggled a bit with the client-side downsides with React, but have lately been coming around to it more.

sachin_mittal98 profile image

I build my portfolio website with React. Here it is . Now I am thinking to shift it on gatsby. I heard a lot about this framework so should I shift it to gatsby or remain it on react

danyrupes profile image

Yeah its nice. Im going to try Gatsby for my site.

niyasrahman profile image

am changing my super active WordPress based side project to gatsby+strapi

dance2die profile image
Sung M. Kim

Are you migrating WordPress content to Gatsby? or will the WordPress work along with the new gatsby + strapi site?

What would be your plan?

because I have a WordPress blog that I want to migrate to Gatsby

niyasrahman profile image

Nope, am replacing WordPress with strapi as headless cms.actually i wanna play with strapi also content are not updating very frequently. the best solution for you is using gatsby-source-wordpress plugin grab data from cms and build & deploy

Thread Thread
dance2die profile image
Sung M. Kim

Thanks for the tips there 👍

I will keep the WordPress site on (for page rank) and create a static site version with Gatsby using the plugin (with new URL).

gatispriede profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Gatis Priede

Bad article. We have ssr and works even better than PHP solutions for server

flexdinesh profile image
Dinesh Pandiyan Author • Edited

I don't mean that Gatsby or Next is THE BEST SOLUTION. But they suit for most cases. Could you elaborate a bit on how you think your solution is better than others?

It'd be great if you could add your case argument as well.

I very much welcome critique and I that's how everybody starts seeing things from a different perspective and learns. But quoting "bad" without an argument or reason is not helpful for anyone. That's not how we do things here at DEV.

lampewebdev profile image
Michael "lampe" Lazarski

Who is we?

And what has PHP todo with this post?

flexdinesh profile image
Dinesh Pandiyan Author

You, me and everyone in the DEV community 😀