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

#### Tiled WMS

wms 13 tile 10 tilelayer 3

#####

Example of a tiled WMS layer.

WMS can be used as a Tile layer, as shown here, or as an Image layer, as shown in the Single Image WMS example. Tiles can be cached, so the browser will not re-fetch data for areas that were viewed already. But there may be problems with repeated labels for WMS servers that are not aware of tiles, in which case single image WMS will produce better cartography.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import TileLayer from 'ol/layer/WebGLTile.js';
    import OSM from 'ol/source/OSM.js';
    import TileWMS from 'ol/source/TileWMS.js';

    const layers = [
      new TileLayer({
        source: new OSM(),
      }),
      new TileLayer({
        extent: [-13884991, 2870341, -7455066, 6338219],
        source: new TileWMS({
          url: 'https://ahocevar.com/geoserver/wms',
          params: {'LAYERS': 'topp:states', 'TILED': true},
          serverType: 'geoserver',
          // Countries have transparency, so do not fade tiles:
          transition: 0,
        }),
      }),
    ];
    const map = new Map({
      layers: layers,
      target: 'map',
      view: new View({
        center: [-10997148, 4569099],
        zoom: 4,
      }),
    });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Tiled WMS</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": "wms-tiled",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }