Banksalad Builds Recruitment Site with GatsbyJS… Maximizing SEO and Maintenance Efficiency

Banksalad developed a new recruitment site and tech blog based on GatsbyJS for large-scale hiring. To overcome the limitations of the existing CSR approach and strengthen search engine optimization (SEO), the team introduced a static Site Generator.

Background for Choosing GatsbyJS and Architecture

The project team preferred a React-friendly development environment and a JAMstack structure. Since GatsbyJS generates markup at build time, it offers excellent SEO effectiveness even on search engines other than Google. Additionally, through Markdown-based content management and CMS integration, the HR team was enabled to directly edit recruitment information.

• Separation of Concerns (SoC): Clearly divided into Page, Container, and Component to reduce code complexity.
• Plugin utilization: Automated sitemap generation and hosting through gatsby-plugin-sitemap, gatsby-plugin-netlify, and others.
• Data management: Wrapped GraphQL queries in React Hooks to increase reusability, and implemented filtering functionality using Markdown metadata.

Build Environment Issues and Solutions

During development, the site behaves the same as CSR, but at build time, since it's a Node.js environment, an issue arose where the window object could not be accessed. To resolve this, the team applied a typeof window !== 'undefined' conditional statement, or handled PC/mobile branching using media queries (CSS).

Results and Implications

The new recruitment site achieved SEO improvements along with reduced development resources. In particular, it established a structure where anyone could easily participate even without dedicated maintenance staff. As a result of deployment, the applicant inflow path shifted toward search-centric, achieving the result of applicant numbers doubling. GatsbyJS provides a faster and more efficient development experience than React for content-centric sites without complex logic.