This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### WFS with geographic coordinates

geographic 4 vector 86 WFS 3 tile 10 strategy 2 loading 8 server 5 maptiler 26

#####

Example of using WFS with a Tile strategy.

This example loads new features from GeoServer WFS with a tile based loading strategy. Calling the `useGeographic` function in the `'ol/proj'` module makes it so the map view uses geographic coordinates (even if the view projection is not geographic).

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import GeoJSON from 'ol/format/GeoJSON.js';
    import TileLayer from 'ol/layer/Tile.js';
    import VectorLayer from 'ol/layer/Vector.js';
    import {tile} from 'ol/loadingstrategy.js';
    import {useGeographic} from 'ol/proj.js';
    import ImageTile from 'ol/source/ImageTile.js';
    import VectorSource from 'ol/source/Vector.js';
    import Stroke from 'ol/style/Stroke.js';
    import Style from 'ol/style/Style.js';
    import {createXYZ} from 'ol/tilegrid.js';

    useGeographic();

    const vectorSource = new VectorSource({
      format: new GeoJSON(),
      url: function (extent) {
        return (
          'https://ahocevar.com/geoserver/wfs?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
          'outputFormat=application/json&srsname=EPSG:4326&' +
          'bbox=' +
          extent.join(',') +
          ',EPSG:4326'
        );
      },
      strategy: tile(createXYZ({tileSize: 512})),
    });

    const vector = new VectorLayer({
      source: vectorSource,
      style: new Style({
        stroke: new Stroke({
          color: 'rgba(0, 0, 255, 1.0)',
          width: 2,
        }),
      }),
    });

    const key = 'Get your own API key at https://www.maptiler.com/cloud/';
    const attributions =
      '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
      '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

    const raster = new TileLayer({
      source: new ImageTile({
        attributions: attributions,
        url: 'https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=' + key,
        tileSize: 512,
        maxZoom: 20,
      }),
    });

    const map = new Map({
      layers: [raster, vector],
      target: document.getElementById('map'),
      view: new View({
        center: [-80.0298, 43.4578],
        maxZoom: 19,
        zoom: 12,
      }),
    });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>WFS with geographic coordinates</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "vector-wfs-geographic",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }